<template>
	<view class="zpItemBox">
		<view class="zpText">{{costData.costName}}</view>
		<view class="zpContent">
			<view class="zpContentItem">
				<view class="zpItemText">持仓金额(元)</view>
				<view class="zpItemNum">9999999</view>
			</view>
			<view class="zpContentItem">
				<view class="zpItemText">总重量(克)</view>
				<view class="zpItemNum">99999</view>
			</view>
			<view class="zpContentItem">
				<view class="zpItemText">收益(元)</view>
				<view class="winNum">999999</view>
			</view>
			
		</view>
		<view class="foot">
			<view class="leftFoot">
				<view class="rate">
					<view class="rateTop">30.00%</view>
					<view class="ratebottom">收益率</view>
				</view>
				<view class="totalMoney">
					<view class="moneyTop">
						<image src="../../static/images/wallet-one.png" mode="heightFix"></image>
						<view class="syMoney">89898.00</view>
					</view>
					<view class="moneycenter">
						<view class="progressLine"></view>
					</view>
					<view class="moneybottom">
						<view class="moneyText1">￥0</view>
						<view class="moneyText2">￥{{costData.costAmount}}</view>
					</view>
				</view>
				
			</view>
			<view class="rightFoot" @click="tozbPage">
				<image src="../../static/images/edit.png" mode="heightFix"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"zpBox",
		props: {
			costData: {
				type: Object,
				default() { return {} }
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			tozbPage() {
				uni.navigateTo({
					url: `/pages/zbPage/zbPage?costId=${this.costData._id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zpItemBox{
		transition: 0.3s ease;
		// position: relative;
		margin-top: 20rpx;
		height: 270rpx;
		// background: transparent;
		background: linear-gradient(to top right, #FFFAF0, #fff);
		border-radius: 30rpx;
		// border: 10rpx solid transparent;
		// box-shadow:
		// -10rpx -10rpx 10rpx rgba(255, 255, 255, 0.2),
		// 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1),
		// inset -10rpx -10rpx 10rpx rgba(255, 255, 255, 0.2),
		// inset 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1);
		
		// box-shadow:
		// -4rpx -4rpx 5rpx rgba(0, 0, 0, 0.1),
		// inset -4rpx -4rpx 5rpx rgba(0, 0, 0, 0.1),
		// 5rpx 10rpx 10rpx rgba(0, 0, 0, 0.1);
		
		.zpText{
			max-width: 200rpx;
			background: linear-gradient(to top right, #FFDEAD, #f6c74f); //
			border-bottom-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			text-align: center;
		}
		
		.zpContent{
			margin-top: 10rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: grid;
			// grid-template-columns: repeat(auto-fill, minmax(150rpx,205rpx));
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			
			.zpContentItem{
				height: 100rpx;
				background: transparent;
				border-radius: 30rpx;
				// box-shadow:
				// -5rpx -5rpx 5rpx rgba(255, 255, 255, 0.4),
				// 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1);
				/* box-shadow: 
				-15rpx -15rpx 15rpx rgba(255, 255, 255, 0.4),
				15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1); */
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.zpItemText {
					font-size: 25rpx;
					background: linear-gradient(to top right, #8B4500, #000000);
					-webkit-background-clip: text;
					color: transparent;
					// font-weight: bolder;
				}
				
				.zpItemNum {
					width: 100%;
					text-align: center;
					background: linear-gradient(to top right, #8B4500, #000000);
					-webkit-background-clip: text;
					color: transparent;
					font-size: 30rpx;
					font-weight: bolder;
					// color: #363636;
				}
			}
			
			
		}
		
		.foot{
			// position: absolute;
			bottom: 5rpx;
			width: 90%;
			height: 115rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			// margin-bottom: 0rpx;			
			// border: 1rpx solid red;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			
			.leftFoot {
				display: grid;
				grid-template-columns: 1fr 2fr;
				// height: 50rpx;
				width: 80%;
				// border: 1rpx solid red;
				
				
					
				.rate {
					// border: 1rpx solid red;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.rateTop {
						width: 70rpx;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						border-radius: 50%;
						// border: 1rpx solid red;
						background: 
						// radial-gradient(circle at 50% 50%, white 50rpx, transparent 50rpx);
						radial-gradient(circle at 50% 50%, white 25rpx, transparent 25rpx),
						conic-gradient(gold 0% 30%, transparent 30% 100%);
						font-size: 15rpx;
					}
					
					.ratebottom {
						font-size: 25rpx;
						background: linear-gradient(to top right, #8B4500, #000000);
						-webkit-background-clip: text;
						color: transparent;
					}
				}
				
				.totalMoney {
					// border: 1rpx solid red;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 5rpx;
					.moneyTop {
						width: 60%;
						display: flex;
						// text-align: left;
						// border: 1rpx solid red;
						// color: #6a8cac;
						// font-size: 30rpx;
						image{
							width: 100%;
							height: 100%;
						}
						
						.syMoney {
							margin-left: 10rpx;
							font-size: 30rpx;
							color: #fbc20a;
						}
					}
					
					.moneycenter {
						height: 8rpx;
						width: 60%;
						// background: linear-gradient(to right, #d8e5f2, #a3bcd6, #6a8cac);
						background: #d8e5f2;
						border-radius: 8rpx;
						
						.progressLine {
							width: 65%;
							height: 100%;
							background: linear-gradient(to right, #f3e4b2, #fbc20a, #f9a800);
						
						}
					}
					
						
					.moneybottom {
						width: 60%;
						display: flex;
						justify-content: space-between;
						font-weight: bolder;
					
						.moneyText1 {
							font-size: 20rpx;
							color: #f3e4b2;
						}
						.moneyText2 {
							font-size: 20rpx;
							color: #f9a800;
						}
					}
				}
			}
			
			.rightFoot {
				padding: 20rpx;
				margin-top: 30rpx;
				line-height: 40rpx;
				height: 40rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
		}
		
		
	}
	
	/* 点击时阴影逐渐消失 */
	.zpItemBox:active {
		transform: scale(0.97);
		box-shadow: 0 0 0 0 transparent;
	}

</style>